<template>
	<view class="merchant">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<u-sticky bg-color="#fff" style="overflow: hidden;">
				<u-tabs class="tabs" :list="tabs" active-color="#125cd7" :is-scroll="false" :current="current"
					@change="onChange"></u-tabs>
			</u-sticky>

			<scroll-view style="height: 76vh;" scroll-y=true @scrolltolower="getShopList()" v-if="list.length >= 1">
				<view class="merchant-list">
					<view class="merchant-item" v-for="(item,index) in list" :key="index"
						@click="pageRoute('/merchantPages/merchant/form?id='+item.id)">
						<view class="header">
							<view class="icon">
								<!-- <u-icon name="bookmark-fill" color="#fff"></u-icon> -->
								<uni-icons type="icon-iconfont108" custom-prefix="iconfont" size="30"
									v-if="item.store_type == 1"></uni-icons>
								<uni-icons type="icon-shuizhan1" custom-prefix="iconfont" size="30"
									v-if="item.store_type == 2"></uni-icons>
							</view>
							<view class="info">
								<view class="name">商户名:{{item.merchant_name}}</view>
								<view class="name">门店名:{{item.store_name}}</view>
								<view class="name">
									商家类型:<text>{{item.store_type == 1?'联盟商家':'加盟水站'}}</text>
								</view>
								<view class="time">
									申请时间:{{item.create_time}}
								</view>
								<view class="time red" v-if="item.status == 2">
									{{item.admin_remark}}
								</view>
							</view>

							<view class="btnGroup">
								<text class="tag" v-if="item.status==0">待审核</text>
								<text class="tag" style="color: green;" v-if="item.status==1">已通过</text>
								<text class="tag" style="color: red;" v-if="item.status==2">不通过</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="empty-data" v-if="list.length == 0">暂无数据~</view>

		<view class="footer">
			<view class="btn-group">
				<u-button type="success" size="large" @click="pageRoute('/merchantPages/merchant/form')">申请商户</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商户管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		current: 0,
		tabs: [{
				name: '全部'
			},
			{
				name: '待审核'
			},
			{
				name: '不通过'
			},
			{
				name: '已通过'
			},
		],
		isMore: true,
		list: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getShopList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function getShopList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		let params = {
			type: state.current,
			skip: state.list.length,
		};
		request.get('water.merchant/getList', params).then(res => {
			console.log('申请商户列表', res);
			state.isMore = res.data.is_more;
			if (state.list.length == 0) {
				state.list = res.data.list;
			} else {
				state.list = state.list.concat(res.data.list);
			}
		})
	}

	// 选项卡切换
	function onChange(e) {
		console.log('选项', e);
		state.current = e.index;
		state.isMore = true
		state.list = []
		getShopList();
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		current,
		tabs,
		isMore,
		list,
	} = toRefs(state);
</script>

<style lang="scss">
	.merchant {
		padding: $m24;

		.content {
			.tabs {}

			.merchant-list {
				.merchant-item {
					margin-top: $m24;
					background-color: $u-bg-reverse-color;
					border-radius: 16rpx;

					.header {
						@include f-between;
						padding: $m16 $m24;

						.icon {
							@include f-center;
							width: 48rpx;
							height: 48rpx;
							// background-color: #709fed;
							// border-radius: 50%;
						}

						.info {
							flex: 1;
							margin: 0 $m20;

							.name {
								color: $u-main-color;

								text {
									font-size: 26rpx;
									color: grey;
								}
							}

							.time {
								font-size: $font-24;
								color: $u-tips-color;
							}

							.red {
								color: #f66;
							}
						}

						.btnGroup {
							.tag {
								padding: 0.3em 0.6rem;
								background-color: $u-bg-color;
								border-radius: 8rpx;
								font-size: $font-20;
								font-weight: 500;
							}
						}
					}
				}
			}
		}

		.empty-data {
			margin-bottom: $m24;
			padding: $m24;
			border-radius: $radius-16;
			text-align: center;
			align-items: center;
			justify-content: center;
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>